<template>
	<div class="node-config">
		<el-form :label-position="isTjNode ? '' : 'top'" label-width="90px">
			<div v-if="isRootNode || isCsNode">
				<el-form-item :label="isRootNode ? '谁可以发起此审批' : '选择要抄送的人员/部门'" prop="text">
					<!-- 抄送人员 -->
					<v-auditer v-model="selectUsers" @on-confirm="auditerConfirm" :disDept="true"></v-auditer>
					<!-- 上节点自选抄送人 -->
					<div>
						<span>是否允许审批节点自选:&nbsp;</span>
						<el-radio-group v-model="props.targetObj.csType">
							<el-radio label="00" key="00">
								不允许
							</el-radio>
							<el-radio label="01" key="01">
								允许
							</el-radio>
						</el-radio-group>
					</div>

					<div style="color: #38adff; font-size: x-small" v-show="isRootNode && props.targetObj.objs.length === 0">
						不指定则默认所有人都可发起此审批
					</div>
					<div>
						<el-tag
							:key="user.id"
							:type="'00' === user.type ? 'info' : 'primary'"
							v-for="(user, index) in props.targetObj.objs"
							size="mini"
							style="margin: 5px 10px 5px 0"
							@close="props.targetObj.objs.splice(index, 1)"
							closable
						>
							{{ user.name }}
						</el-tag>
					</div>
				</el-form-item>
			</div>

			<div v-if="isTjNode">
				<el-form-item label="调整优先级" prop="level">
					<el-popover placement="right" title="拖拽条件调整优先级顺序" width="250" trigger="click">
						<draggable
							style="width: 100%; min-height:27px"
							:list="prioritySortList"
							group="from"
							:options="{ animation: 300, chosenClass: 'choose', scroll: true, sort: true }"
						>
							<div
								class="drag-no-choose"
								:style="list.id === selectedNode.id ? 'background: #79bbff; color:#ffffff' : ''"
								v-for="(list, index) in prioritySortList"
							>
								<div>{{ list.name }}</div>
								<div>优先级 {{ index + 1 }}</div>
							</div>
						</draggable>
						<el-button icon="el-icon-sort" size="small" slot="reference">第{{ getNowNodeIndex + 1 }}级</el-button>
					</el-popover>
					<div class="group-connect">
						<span>条件组关系:</span>
						<el-switch
							v-model="selectedNode.connection"
							active-color="#409EFF"
							inactive-color="#909399"
							active-value="AND"
							inactive-value="OR"
							active-text="且"
							inactive-text="或"
						></el-switch>
					</div>
				</el-form-item>
				<div>
					<condition></condition>
					<el-button type="primary" size="mini" icon="el-icon-plus" style="margin-bottom: 15px" round @click="addConditionGroup">
						添加条件组
					</el-button>
					<span style="font-size: small; color: #7a7a7a; margin-left: 20px">只有必填选项才能作为审批条件</span>
				</div>
			</div>

			<div v-if="isSpNode">
				<el-form-item label="选择审批人" prop="text" class="select-user-type">
					<el-radio-group v-model="props.type" @change="radioChangeHandler">
						<el-radio v-for="t in approvalType" :label="t.label" :key="t.label">
							{{ t.text }}
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<div>
					<div v-if="props.type === enumConst.approvalType.ASSIGN_USER">
						<!--  指定审批人员 -->
						<v-auditer v-model="selectUsers" @on-confirm="auditerConfirm" :disDept="true" :multiple="false"></v-auditer>
						<div>
							<el-tag
								:key="user.id"
								:type="'01' === user.type ? 'info' : 'primary'"
								v-for="(user, index) in props.targetObj.objs"
								size="mini"
								style="margin: 5px 10px 5px 0"
								@close="props.targetObj.objs.splice(index, 1)"
								closable
							>
								{{ user.name }}
							</el-tag>
						</div>
					</div>

					<div v-if="props.type === enumConst.approvalType.ASSIGN_USERS">
						<!--  指定多个审批人员 -->
						<v-auditer v-model="selectUsers" @on-confirm="auditerConfirm" :disDept="true" :multiple="true"></v-auditer>
						<div>
							<el-tag
								:key="user.id"
								:type="'01' === user.type ? 'info' : 'primary'"
								v-for="(user, index) in props.targetObj.objs"
								size="mini"
								style="margin: 5px 10px 5px 0"
								@close="props.targetObj.objs.splice(index, 1)"
								closable
							>
								{{ user.name }}
							</el-tag>
						</div>
					</div>

					<div v-if="props.type === enumConst.approvalType.ROLE">
						<el-select placeholder="请选择角色" v-model="selectRoles" multiple clearable @change="roleChangeHandle">
							<el-option v-for="item in roleScope" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>

					<div v-if="props.type === enumConst.approvalType.SELF">
						<p style="font-size: 15px; color:#8c8c8c;">发起人自己作为审批人进行审批</p>
					</div>

					<div v-if="props.type === enumConst.approvalType.SELF_SELECT">
						<el-select size="small" v-model="props.targetObj.multiple" placeholder="选择人数">
							<el-option :value="false" label="自选一个人"></el-option>
							<el-option :value="true" label="自选多个人"></el-option>
						</el-select>
					</div>
				</div>
			</div>

			<div v-if="props.type === enumConst.approvalType.LEADER">
				<el-divider></el-divider>
				<el-form-item label="指定主管" prop="text" style="color:#606266;">
					<span>发起人的第</span>
					<el-input-number :min="1" :max="20" :step="1" size="mini" v-model="props.leaderLevel"></el-input-number>
					<span>级主管</span>
					<div style="color: #409EFF; font-size: small;">👉 直接主管为 第 1 级主管</div>
				</el-form-item>
			</div>

			<div v-if="showModel">
				<el-divider></el-divider>
				<el-form-item label="多人审批时审批方式" prop="text" class="approve-mode">
					<el-radio-group v-model="props.mode">
						<el-radio :label="enumConst.approvalMode.NEXT">会签（按顺序依次审批，每个人必须同意）</el-radio>
						<el-radio :label="enumConst.approvalMode.AND">会签（可同时审批，每个人必须同意）</el-radio>
						<el-radio :label="enumConst.approvalMode.OR">或签（有一人同意即可）</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>

			<div v-if="props.type === enumConst.approvalType.LEADER_TOP">
				<el-divider></el-divider>
				<el-form-item label="审批终点" prop="text" class="approve-end">
					<el-radio-group v-model="props.endCondition">
						<el-radio :label="enumConst.endCondition.TOP">直到最上层主管</el-radio>
						<el-radio :label="enumConst.endCondition.LEAVE">不超过发起人的</el-radio>
					</el-radio-group>
					<div class="approve-end-leave" v-if="enumConst.endCondition.TOP !== props.endCondition">
						<span>第</span>
						<el-input-number :min="1" :max="20" :step="1" size="mini" v-model="props.leaderLevel"></el-input-number>
						<span>级主管</span>
					</div>
				</el-form-item>
			</div>

			<div v-if="showUserEmpty">
				<el-divider></el-divider>
				<el-form-item label="审批人为空时" prop="text" class="approve-mode">
					<el-radio-group v-model="props.userEmpty">
						<el-radio :label="enumConst.userEmpty.TO_PASS">自动通过</el-radio>
						<!-- <el-radio :label="enumConst.userEmpty.TO_ADMIN">自动转交管理员</el-radio> -->
						<el-radio :label="enumConst.userEmpty.TO_USER">转交到指定人员</el-radio>
					</el-radio-group>
				</el-form-item>
				<!--  转交指定审批人员 -->
				<v-auditer
					v-if="props.userEmpty == enumConst.userEmpty.TO_USER"
					v-model="deliverUsers"
					@on-confirm="deliverConfirm"
					:disDept="true"
					:multiple="false"
				></v-auditer>
			</div>
			<div v-if="isSpNode">
				<el-divider></el-divider>
				<el-form-item label="如果审批被驳回" prop="text" class="approve-mode">
					<el-radio-group v-model="props.refuse">
						<el-radio :label="enumConst.refuse.ENDED_PRO">直接结束流程</el-radio>
						<el-radio :label="enumConst.refuse.PRE_NODE">驳回到前一个审批节点</el-radio>
						<el-radio :label="enumConst.refuse.TO_PASS">继续流转</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
		</el-form>

		<!-- <org-picker
			:show="showUserSelect"
			:onlyUser="onlySelectUser"
			@close="showUserSelect = false"
			:selected="select"
			@selectOver="selected"
		></org-picker> -->
	</div>
</template>

<script>
// import orgPicker from "../common/organizationPicker"
import condition from "./condition"
import enumConst from "../common/enumConst"
import draggable from "vuedraggable"
import { roleList } from "@/api/auth/sysrole.js"

export default {
	name: "nodeConfig",
	components: { draggable, condition },
	props: {
		node: {
			default: () => {
				return {}
			},
			type: Object,
		},
	},
	data() {
		return {
			enumConst: enumConst,
			// showUserSelect: false,
			select: [],
			approval: [],
			approvalType: [
				// { label: enumConst.approvalType.ASSIGN_USER, text: "指定单人" },
				{ label: enumConst.approvalType.ASSIGN_USERS, text: "指定审批人" },
				{ label: enumConst.approvalType.SELF_SELECT, text: "发起人自选" },
				{ label: enumConst.approvalType.LEADER_TOP, text: "连续多级主管" },
				{ label: enumConst.approvalType.LEADER, text: "主管" },
				{ label: enumConst.approvalType.ROLE, text: "角色" },
				{ label: enumConst.approvalType.SELF, text: "发起人自己" },
			],
			timeoutEvents: [
				{ event: enumConst.timeoutEvent.PASS, name: "自动通过" },
				{ event: enumConst.timeoutEvent.REFUSE, name: "自动拒绝" },
				{ event: enumConst.timeoutEvent.NOTIFY, name: "发送提醒" },
			],
			roleScope: [],
		}
	},
	computed: {
		selectedNode() {
			return this.$store.state.flowableSelectedNode
		},
		getNowNodeIndex() {
			for (let i = 0; i < this.prioritySortList.length; i++) {
				if (this.selectedNode.id === this.prioritySortList[i].id) {
					return i
				}
			}
			return 0
		},
		prioritySortList() {
			return this.$store.state.flowableParentMap.get(this.selectedNode.pid).conditions || []
		},
		conditionGroups() {
			return this.$store.state.flowableParentMap.get(this.selectedNode.pid)
		},
		isRootNode() {
			return this.selectedNode.type === enumConst.nodeType.ROOT
		},
		isTjNode() {
			return this.selectedNode.type === enumConst.nodeType.TJ
		},
		isCsNode() {
			return this.selectedNode.type === enumConst.nodeType.CS
		},
		isSpNode() {
			return this.selectedNode.type === enumConst.nodeType.SP
		},
		onlySelectUser() {
			return (
				this.selectedNode.type === enumConst.nodeType.CS ||
				this.selectedNode.type === enumConst.nodeType.SP ||
				this.props.type === "1"
			)
		},
		props() {
			return this.$store.state.flowableSelectedNode.props
		},
		showModel() {
			return (
				this.isSpNode &&
				((this.props.targetObj.objs.length > 1 && this.props.type === enumConst.approvalType.ASSIGN_USER) ||
					(this.props.targetObj.objs.length > 1 && this.props.type === enumConst.approvalType.ASSIGN_USERS) ||
					(this.props.type === enumConst.approvalType.SELF_SELECT && this.props.targetObj.multiple) ||
					this.props.type === enumConst.approvalType.LEADER ||
					this.props.type === enumConst.approvalType.LEADER_TOP ||
					(this.props.type === enumConst.approvalType.ROLE && this.props.targetObj.roles.length > 0))
			)
		},
		showUserEmpty() {
			return (
				this.props.type === enumConst.approvalType.LEADER_TOP ||
				this.props.type === enumConst.approvalType.LEADER ||
				this.props.type === enumConst.approvalType.ROLE
			)
		},
		//人员及部门选择
		selectUsers: {
			get() {
				let u = {
					dept: [],
					user: [],
				}
				if (this.props.targetObj.objs) {
					this.props.targetObj.objs.forEach(item => {
						//部门
						if (item.type === "00") {
							u.dept.push(item.id)
							//人员
						} else if (item.type === "01") {
							u.user.push(item.id)
						}
					})
				}
				return u
			},
			set(v) {
				return v
			},
		},
		//选中的角色
		selectRoles: {
			get() {
				let r = []
				if (this.props.targetObj.roles) {
					this.props.targetObj.roles.forEach(item => {
						r.push(item.id)
					})
				}
				return r
			},
			set(v) {
				return v
			},
		},
		//转交指定的人员
		deliverUsers: {
			get() {
				let u = {
					dept: [],
					user: [],
				}
				if (this.props.targetObj.delivers) {
					this.props.targetObj.delivers.forEach(item => {
						//部门
						if (item.type === "00") {
							u.dept.push(item.id)
							//人员
						} else if (item.type === "01") {
							u.user.push(item.id)
						}
					})
				}
				return u
			},
			set(v) {
				return v
			},
		},
	},
	created() {
		console.log("nodeConfig")
		this.roleScope = []
		roleList().then(resp => {
			if (resp.code == 0) {
				this.roleScope = resp.data
			}
		})
	},
	methods: {
		showRoot() {
			return this.selectedNode.type === enumConst.nodeType.ROOT
		},
		selected(select) {
			this.$store.commit(
				"selectedApprover",
				select.map(s => {
					return { id: s.id, type: s.type, name: s.name }
				}),
			)
			// this.showUserSelect = false
		},
		addConditionGroup() {
			if (this.selectedNode.groups.length < 5) {
				this.selectedNode.groups.push({
					connection: enumConst.logicType.OR,
					cids: [],
					condition: [],
				})
			} else {
				this.$message.warning("最多只允许添加5个条件组")
			}
		},
		/**
		 * 人员选择选中的数据
		 * @param {*} chooseArray
		 * @param {*} chooseData
		 */
		auditerConfirm(chooseArray, chooseData) {
			console.log("auditerConfirm", chooseArray, chooseData)
			this.$store.commit("flowableSelectedApprover", chooseData)
		},
		/**
		 * 切换角色选择
		 * @param {*} val
		 */
		roleChangeHandle(val) {
			console.log("flowableSelectedRoles", val)
			let roles = []
			val.forEach(item => {
				this.roleScope.find(r => {
					if (r.id === item) {
						roles.push(r)
					}
				})
			})
			this.$store.commit("flowableSelectedRoles", roles)
		},
		/**
		 * 转发指定人员选择选中的数据
		 * @param {*} chooseArray
		 * @param {*} chooseData
		 */
		deliverConfirm(chooseArray, chooseData) {
			console.log("deliverConfirm", chooseArray, chooseData)
			this.$store.commit("flowableSelectedDelivers", chooseData)
		},
		//切换审批类型
		radioChangeHandler() {
			console.log(this.props.targetObj.objs)
			this.props.targetObj.objs = []
		},
	},
}
</script>

<style lang="scss" scoped>
*,
::after,
::before {
	box-sizing: content-box;
}
.node-config {
	padding: 0 20px;
	overflow-y: auto;

	/deep/ .el-form {
		.el-form-item__label {
			font-size: 14px;
			color: #000;
		}

		.el-form-item {
			margin-bottom: 5px;
		}
	}
}

.select-user-type {
	/deep/ .el-radio {
		width: 80px;
		margin-top: 10px;
		margin-bottom: 20px;
	}
}

/deep/ .approve-mode {
	.el-radio {
		float: left;
		width: 100%;
		display: block;
		margin-top: 15px;
	}
}

/deep/ .approve-end {
	position: relative;

	.el-radio-group {
		width: 160px;
	}

	.el-radio {
		margin-top: 15px;
		width: 100%;
	}

	.el-radio:last-child {
		margin-top: 15px;
		width: 50px;
	}

	.approve-end-leave {
		position: absolute;
		bottom: -10px;
		right: 20px;
	}
}

.select-u {
	width: 100%;
}

.group-connect {
	display: inline;
	margin-left: 50px;
	& > span {
		margin-right: 20px;
	}
}

.choose {
	border-radius: 5px;
	margin-top: 2px;
	background: #f4f4f4;
	border: 1px dashed #1890ff !important;
}
.drag-no-choose {
	cursor: move;
	background: #f4f4f4;
	border-radius: 5px;
	position: relative;
	margin-top: 2px;
	padding: 5px 10px;
	border: 1px solid #bcbcbc;
	height: 20px;
	div:nth-child(1) {
		font-size: x-small;
		position: absolute;
		width: 160px;
		left: 10px;
		height: 20px;
		overflow: hidden;
	}
	div:nth-child(2) {
		position: absolute;
		right: 10px;
	}
}
</style>
